<template>
    <div v-loading="loadingData" class="userTable">
        <div v-if="addService">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark" style="font-size:14px;">
                        服务设置
                        <el-button class="fr" type="primary" @click="addService = false,imageUrl = '',serviceName = '',addServiceType = 1">新增服务</el-button>
                    </div>
                </el-col>
            </el-row>
            <template>
                <el-table :data="tableData" style="width: 100%" stripe :header-cell-class-name="headerCellClassName">
                    <el-table-column prop="name"  label="服务名称"></el-table-column>
                    <el-table-column label="标签">
                        <template slot-scope="scope">
                            <span v-for="(item,index) in scope.row.tags" :key="index">{{item.dict.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isStatus" @change="startService(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="delectService(scope.row)">删除</el-button>
                            <el-button type="text" @click="addService = false,addServiceType = 2,edit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
             <!--分页开始-->
            <div class="block">
                <span class="pageFreshFoot"><el-button type="text" class="xin" @click="xin()">刷新</el-button></span>
                <div class="pageComponentFoot">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="cpage"
                        :page-sizes="[10,20,30,40]"
                        :page-size="pagesize"
                        layout="total, prev, pager, next, jumper"
                        :total="totalCount">
                    </el-pagination>
                </div>
                <div style="clear:both"></div>
            </div>
            <!--分页结束-->
        </div>
        <div v-else>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark clearfix">
                        <ul class="dataUpdateUl fl">
                            <li class="clearfix">
                                <label class="fl">
                                    服务名称
                                </label>
                                <input class="inputtext margin0" v-model="serviceName" style="width:350px;" type="text" name="" id="">
                            </li>
                            <li class="clearfix">
                                <label class="fl">
                                    服务标签
                                </label>
                                <div class="fl">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox v-for="(item,index) in checkListArr" :key="index" :label="item.name"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label class="fl">
                                    服务编码
                                </label>
                                <input class="inputtext margin0" v-model="serviceCode" style="width:350px;" type="text" name="" id="">
                            </li>
                            <li class="clearfix">
                                <label class="fl">
                                    服务描述
                                </label>
                                <input class="inputtext margin0" v-model="serviceMs" style="width:350px;" type="text" name="" id="">
                            </li>
                            <li class="clearfix">
                                <label class="fl labelWidth text-align-r">
                                    服务属性
                                </label>
                                <div class="shux-box fl">
                                    <span class="position-r shux-span fl" v-for="(item,index) in shuxing1" :key="index">{{item.val}} <i @click="deletArr(1,index)">X</i></span>
                                    <el-button type="primary fl" size="small" @click="add(1)">添加属性</el-button>
                                </div>
                            </li>
                            <li class="clearfix" v-for="(item,index) in shuxing1" :key="index">
                                <label class="fl labelWidth text-align-r">
                                    {{item.val}}
                                </label>
                                <div class="shux-box fl">
                                    <span class="position-r shux-span fl" v-for="(it,i) in item.arr" :key="i">{{it}} <i @click="deletArr(2,i,index)">X</i></span>
                                    <el-button type="primary fl" size="small" @click="add(2,index)">添加属性</el-button>
                                </div>
                            </li>
                            <!-- <li class="clearfix">
                                <label class="fl">
                                    服务段位
                                </label>
                                <div class="shux-box fl">
                                    <span class="position-r shux-span fl" v-for="(item,index) in shuxing3" :key="index">{{item}} <i @click="deletArr(3,index)">X</i></span>
                                    <el-button type="primary fl" size="small" @click="add(3)">添加属性</el-button>
                                </div>
                            </li> -->
                        </ul>
                        <div class="service-box fl">
                            <div class="clearfix">
                                <span class="service-logo fl">服务logo</span>
                                <el-upload
                                    class="avatar-uploader fl"
                                    action="http://132.232.13.213:8081/file/upload"
                                    :data="uploadData"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <span class="service-beizhu fl">注：建议使用750*360px，文件大小不超过3M，文件格式jpg,jpeg,png,gif</span>
                            </div>
                            <div class="clearfix" style="margin-top:10px;">
                                <span class="service-logo fl">示例图片</span>
                                <el-upload
                                    class="avatar-uploader fl"
                                    action="http://132.232.13.213:8081/file/upload"
                                    :data="uploadData2"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess1"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <span class="service-beizhu fl">注：建议使用750*360px，文件大小不超过3M，文件格式jpg,jpeg,png,gif</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="text-align-c button-box">
                <el-button type="info" @click="addService = true,serviceName = '',serviceMs = '',checkList = [],serviceCode = '',shuxing1 = [],imageUrl = '',imageUrl2 = ''">取消</el-button>
                <el-button type="primary" @click="addServiceButtom()">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import HttpService from '../../api/service'
export default {
    data(){
        return{
            uploadData:{            //  上传图片需要的参数，记得修改
                objectId:'111',
                model:'aaaaa'
            },
            uploadData2:{            //  上传图片需要的参数，记得修改
                objectId:'111',
                model:'service/example'
            },
            editServiceId:'',       //  修改服务的id
            addServiceType:1,       //  1代表添加服务，2代表新增服务
            serviceName:'',         // 服务名称
            serviceCode:'',
            serviceMs:'',
            imageUrl:'',            // 图片路径
            imageUrl2:'',            // 示例图片路径
            checkList:[],
            checkListIds:[],
            checkListArr:[],
            loadingData: false,
            addService:true,
            tableData: [],
            totalPage:'',           //  总页数
            cpage:1,                //  当前页
            pagesize:10,            //  每页显示数
            totalCount:0,         //  总条数
            pageNumber: 1,
            shuxing1:[],    //  服务属性
        }
    },
    created(){
        this.listByPage()
        this.groupCode()
    },
    watch:{
        checkList(newVal,oldVal){
            this.checkListIds = []
            for(let i =0; i < newVal.length; i++){
                for(let j = 0; j < this.checkListArr.length; j++){
                    if(newVal[i] == this.checkListArr[j].name){
                        this.checkListIds.push(this.checkListArr[j].id)
                    }
                }
            }
        }
    },
    methods:{
        // 设置header颜色
        headerCellClassName({row, rowIndex}){
            return 'header-row';
        },
        filterTag(value, row) {
            return row.tag === value;
        },
        // 获取服务管理列表
        listByPage(){
            let parmer = {
                page: this.cpage - 1,
                size: this.pagesize
            }
            HttpService.service.listByPage(parmer,resp=>{
                for(let i = 0; i < resp.content.length; i++){
                    if(resp.content[i].status == 0) {
                        resp.content[i].isStatus = true
                    }else{
                        resp.content[i].isStatus = false
                    }
                }
                this.tableData = resp.content
                this.totalCount = resp.totalElements
                this.totalPage = resp.totalPage
            })
        },
        // 启动服务
        startService(item){
            let val = ''
            if(item.status == 0){
                val = 1
            }else{
                val = 0
            }
            let parmer = {
                status:val
            }
            HttpService.service.startService(item.id,parmer,resp=>{
                item.status = resp.status
            })
        },
        //  添加服务标签列表
        groupCode(){
            let parmer = {
                groupCode: 'service_tags'
            }
            HttpService.service.groupCode(parmer,resp=>{
                this.checkListArr = resp
            })
        },
        delectService(item){
            this.$confirm('您确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                HttpService.service.deleteService(item.id,{id:item.id},resp => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.listByPage()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })         
            })
        },
        // 上传图片start
        handleAvatarSuccess(res, file) {
            console.log(URL.createObjectURL(file.raw))
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        // 上传图片start
        handleAvatarSuccess1(res, file) {
            this.imageUrl2 = URL.createObjectURL(file.raw);
        },
        // 添加服务
        addServiceButtom(){
            let objService = []
            for(let i = 0; i < this.shuxing1.length; i++){
                let obj = {
                    "introduce": "",
                    "name": this.shuxing1[i].val,
                    "code": "",
                    "status": 0,
                    "attributeSecondVo": []
                }
                objService.push(obj)
                for(let j = 0; j < this.shuxing1[i].arr.length; j++){
                    let obj2 = {
                        "introduce": "",
                        "name": this.shuxing1[i].arr[j],
                        "status": 0
                    }
                    objService[i].attributeSecondVo.push(obj2)
                }
            }
            if(this.addServiceType == 1) {
                let parmer = this.$qs.parse({
                    "introduce": this.serviceMs,
                    "name": this.serviceName,
                    "code": this.serviceCode,
                    "image": this.imageUrl,
                    "example": this.imageUrl2,
                    "dict":this.checkListIds,
                    "attributeFirstVo":objService
                })
                HttpService.service.addService(parmer,resp=>{
                    if(resp.id){
                        this.$notify({
                            title: '成功',
                            message: '添加服务成功',
                            type: 'success'
                        })
                        this.addService = true
                    }
                })
            }else{
                let parmer = {
                    "introduce": this.serviceMs,
                    "name": this.serviceName,
                    "code": this.serviceCode,
                    "image": this.imageUrl,
                    "example": this.imageUrl2,
                    "dict":this.checkListIds,
                    "attributeFirstVo":objService
                }
                HttpService.service.editService(this.editServiceId,parmer,resp => {
                    if(resp.id){
                        this.$notify({
                            title: '成功',
                            message: '修改服务成功',
                            type: 'success'
                        })
                        this.addService = true
                        this.listByPage()
                    }
                })
            }
            
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // end
        //  编辑
        edit(item){
            this.serviceName = item.name
            this.imageUrl = item.image
            this.imageUrl2 = item.example
            this.serviceCode = item.code
            this.serviceMs = item.introduce
            this.editServiceId = item.id
            for(let i = 0; i < item.tags.length; i ++){
                this.checkList.push(item.tags[i].dict.name)
            }
            for(let i = 0; i < item.attributeFirst.length; i++){
                let v = {
                    val:item.attributeFirst[i].name,
                    arr:[]
                }
                this.shuxing1.push(v)
                for(let j = 0; j < item.attributeFirst[i].attributeSecond.length; j++){
                    this.shuxing1[i].arr.push(item.attributeFirst[i].attributeSecond[j].name)
                }
            }
        },
        // 添加属性         type值为1，2，3  1代表服务属性，2代表服务大区，3代表服务段位
        add(type,index){
            this.objService = []
            let name = '',shuxing=[]
            if(type == 1){
                name = '请输入服务属性名称'
            }else if(type == 2){
                name = '请输入服务大区'
            }
            this.$prompt(name, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                }).then(({ value }) => {
                    if(type == 1){
                        let v = {
                            val:value,
                            arr:[]
                        }
                        this.shuxing1.push(v)
                    }else if(type == 2){
                        this.shuxing1[index].arr.push(value)
                    }
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                })    
            })
        },
        // 删除属性
        deletArr(type,index,index1){
            if(type == 1){
                this.shuxing1.splice(index,1)
            }else if(type == 2){
                this.shuxing1[index1].arr.splice(index,1)
            }
        },
        // 分页
        handleSizeChange(val) {
            this.cpage = val
            this.listByPage()
        },
        handleCurrentChange(val) {
            this.cpage = val
            this.listByPage()
        },
    }
}
</script>

